<template>
  <div >
    <van-sticky>
      <div class="demo-nav" style>
        <div class="demo-nav__title">施工案例</div>
        <span @click="shop()" class="demo-nav__back">
          <svg viewBox="0 0 1000 1000" @click="toBack">
            <path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">
            </path>
          </svg>
        </span>
      </div>
    </van-sticky>

    <!--<van-col>-->
    <!-- <van-col v-for="(item, index) in list" :key="index">
      <div align="left" class="fenli" @click="anliButton(item.caseId)">
          <div>
            <van-image radius="20px" width="9.5rem" height="10rem" :src="item.casePicurl" />
          </div>
          <div style="width: 9.5rem" class="content" align="center">
            <van-row><p class="title">{{item.doorArea }} </p> </van-row>

          </div>
      </div>
    </van-col> -->
    <div class="our">
      <div class="cg" v-for="(item, index) in list" :key="index" @click="anliButton(item.caseId)">
        <img :src="item.casePicurl" alt="">
        <span>{{item.doorArea }}</span>
      </div>

    </div>




  </div>
</template>

<script>
import { getCaseId } from "@/api/constructionTeam/caseinfo";
export default {
  name: "DecorateACase",
  components: {
    Item: () => import("@/components/commons/ItemCase.vue"),
  },
  data(){
    return{
      list: [],
      constructionId:'',
      caseId: '',
      // item: Object,
      loading: false,
      finished: false,
      refreshing: false,

    }
  },

  created(){
    const constructionId = this.$route.query && this.$route.query.constructionId;
    this.constructionId = constructionId;
    console.log("*******"+constructionId);
    this.getCaseId(constructionId);
  },
  methods:{



    anliButton(caseId){
      this.$router.push({
        path:"/CaseDetails",
        query:{caseId: caseId,constructionId: this.constructionId}
      });
    },

    getCaseId(constructionId){
      getCaseId(constructionId).then(res=>{
        this.list = res.data;

      })
    },

    toBack(){
      this.$router.go(-1);//返回上一层
    },

    //返回shopDetails页面
    shop(){
      this.$router.push({path:"/ShopDetails",query:{constructionId: this.constructionId}});
    }



  }

}
</script>

<style scoped>

.fenli{
  padding: 0.3rem;
}
.aaaaa{
  padding-bottom: 60px;
  height: calc(100*10);
  padding: 0vw 4vw;
}
.demo-nav{
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 3.2rem;
  background-color: #fff;
}
.demo-nav__title {
  font-weight: 450;
  font-size: 1rem;
  text-transform: capitalize;
}
.demo-nav__back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.wrapper {
  display: inline-block;
}

.info1 {
  display: flex;
  margin-top: 2.2vw;
}
.info1 p {
  font-size: 2.733vw;
  height: 4.4vw;
  line-height: 4.4vw;
  margin-right: 1.6vw;
  color: #777777;
}
.info1 .distance {
  font-size: 3.2vw;
  color: #000;
}
.info1 .i {
  font-size: 4.4vw;
}
.title {
  margin: 2.2vw 0vw;
  color: #333;
}
.content {
  text-align: left;
}
.cg img{
  width: 150px;
  height: 150px;
  border-radius: 20px;
}
.cg{
  width: 40%;
  display: flex;
  text-align: left;
  margin-left: 25px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-align: center;
  margin-bottom: 20px;
  /* background-color: red; */
  flex-direction: column;
}
.cg span{
  margin-top: 10px;
  font-size: 15px;
  overflow: hidden;
}
.our{
  display: flex;
  flex-wrap: wrap;
}
</style>
